<template>
  <div class="mainWrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-diaodu fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/invoice-list' }"
        >发票管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>明细</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow">
      <div class="py_5 px_10">
        <el-row>
          <el-col :span="4">
            <el-button type="success" @click="back()" round size="mini"
              >返回</el-button
            >
            <el-button type="default" @click="downloadOrder()" round size="mini"
              >导出结算单</el-button
            >
          </el-col>
          <el-col :span="20">
            <el-form
              ref="form"
              :inline="true"
              :model="searchForm"
              class="form-inline fr"
              :rules="rules"
            >
              <el-form-item>
                <el-input
                  size="mini"
                  class="w_160"
                  v-model="searchForm.bill_shop_sn"
                  placeholder="结算单编号"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="searchForm.bill_shop_status"
                  placeholder="状态"
                  class="w_120"
                  clearable
                >
                  <el-option
                    v-for="item in statusArr"
                    :key="item.id"
                    :label="item.label_name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="searchForm.invoice_status"
                  placeholder="发票状态"
                  class="w_120"
                  clearable
                >
                  <el-option
                    v-for="item in invoiceArr"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="searchForm.time_type"
                  placeholder="时间类型"
                  class="w_120"
                  clearable
                >
                  <el-option
                    v-for="item in timeType"
                    :key="item.id"
                    :label="item.label_name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  size="mini"
                  class="w_180i"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="开始时间"
                  default-time="00:00:00"
                  v-model="searchForm.start_time"
                ></el-date-picker>
              </el-form-item>
              ~
              <el-form-item>
                <el-date-picker
                  size="mini"
                  class="w_180i"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="结束时间"
                  default-time="23:59:59"
                  v-model="searchForm.end_time"
                ></el-date-picker>
              </el-form-item>
              <el-button
                size="mini"
                type="primary"
                class="round-right"
                native-type="button"
                @click="searchBtn"
                >搜索</el-button
              >
              <el-button size="mini" round @click="resetBtn">重置</el-button>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 表格数据 -->
      <div class="tableMaxBox">
        <template>
          <el-table :data="tableList" stripe>
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column
              property="sn"
              label="结算单编号"
              min-width="120"
            ></el-table-column>
            <el-table-column
              property="shop_name"
              label="店铺名称"
              min-width="120"
            ></el-table-column>
            <el-table-column
              property="agent_name"
              label="代理商"
            ></el-table-column>
            <el-table-column
              property="city_name"
              label="城市"
            ></el-table-column>
            <el-table-column
              property="bill_date_start"
              label="结算单开始时间"
              min-width="150"
            ></el-table-column>
            <el-table-column
              property="bill_date_end"
              label="结算单结束时间"
              min-width="150"
            ></el-table-column>
            <el-table-column
              property="type_name"
              label="结算单类型"
            ></el-table-column>
            <el-table-column property="bill_total_hour" label="合计时长(H)" min-width="100"> 
              <template slot-scope="{ row }">
                {{ second2Hour(row.bill_total_hour) }}
              </template>
            </el-table-column>
            <el-table-column property="amount" label="账单金额">
              <template slot-scope="{ row }">
                {{ moneyUnitCent2Coin(row.amount) }}
              </template>
            </el-table-column>
             <el-table-column
              property="count"
              label="数量"
            ></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="{ row }">
                <span class="text-primary" v-if="row.status == 10">已生成</span>
                <span class="text-success" v-if="row.status == 20">待支付</span>
                <span class="text-info" v-if="row.status == 30">已支付</span>
                <span class="text-danger" v-if="row.status == 70">异常</span>
              </template>
            </el-table-column>
            <el-table-column
              property="invoice_status_name"
              label="发票状态"
            ></el-table-column>
            <el-table-column
              property="add_time"
              label="创建时间"
              min-width="150"
            ></el-table-column>
            <el-table-column
              min-width="130"
              property="settlement_sn"
              label="支付记录编号"
            ></el-table-column>
            <el-table-column
              property="pay_time"
              label="回款时间"
              min-width="150"
            ></el-table-column>
            <el-table-column
              property="payer"
              label="回款人"
            ></el-table-column>
            <el-table-column
              property="remark"
              label="备注"
            ></el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchDetailList,fetchInvoiceEnum } from "@/api/invoice.js"
import qs from "qs";
const common = require("../../../static/tool.js");
export default {
  name: "ReportDetails",
  data() {
    return {
      url: common.url,
      searchForm: {
        bill_shop_sn: "", //结算单编号
        bill_shop_status: "", //结算单状态
        invoice_status: "", //发票状态
        time_type: "", //时间类型
        start_time: '', //开始时间
        end_time: '', //结束时间
      },
      staff_name: "",
      sn: '', //发票编号
      source: '', //类型（任务/账单）
      tableList: [], //列表数据
      invoiceArr: [],
      rules: {},
      statusArr: [
        {
          id: "10",
          label_name: "已生成"
        },
        {
          id: "20",
          label_name: "待支付"
        },
        {
          id: "30",
          label_name: "已支付"
        },
        {
          id: "70",
          label_name: "异常"
        }
      ],
      timeType:[
        {
          id: "add_time",
          label_name: "创建时间",
        },
        {
          id: "last_time",
          label_name: "更新时间",
        }
      ]
    };
  },
  mounted() {
    this.sn = this.$route.query.sn
    this.source = this.$route.query.source
    this.fetchInvoiceEnum()
    this.getBillList();
  },
  methods: {
    //搜索
    searchBtn() {
      this.getBillList();
    },
    //重置
    resetBtn() {
       Object.keys(this.searchForm).forEach(
        (key) => (this.searchForm[key] = "")
      )
      this.getBillList();
    },
    //枚举选项
    async fetchInvoiceEnum(){
      try {
        let res = await fetchInvoiceEnum({
          type: "status"
        })
        this.invoiceArr = res.status
      } catch (error) {
        console.log("获取枚举项：" + error)
      }
    },
    //获取列表数据
    async getBillList() {
      try {
        let res = await fetchDetailList({
            sn: this.sn,
            source: this.source,
            ...this.searchForm
        });
        if (res) {
          this.tableList = res.list;
        } else {
          this.tableList = [];
        }
      } catch (err) {
        console.log("err:", err);
      }
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    //导出明细
    downloadOrder() {
      const params = qs.stringify({
        token: JSON.parse(sessionStorage.getItem("manageInfo")).token,
        sn: this.sn,
        source: this.source,
        ...this.searchForm,
      });
      window.location.href =
        this.url + "/invoice/exportsourceDetail?" + params;
    }
  },
};
</script>
<style scoped lang="scss">
.success {
  color: green !important;
}
.danger {
  color: red !important;
}
</style>


// WEBPACK FOOTER //
// src/components/invoice/StatementList.vue